<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.filter['user.nickname']"
        placeholder="请输入昵称"
        style="width: 200px;"
        col="6"
      ></el-input>
      <el-input
        v-model="listQuery.filter['user.phone']"
        placeholder="请输入手机号码"
        style="width: 200px;"
        col="6"
      ></el-input>
      <el-select v-model="listQuery.filter.status" clearable placeholder="状态">
        <el-option
          v-for="item in formSelections.statusList"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="searchData">查询</el-button>
    </div>

    <el-table
      :data="list"
      border
      style="width: 100%"
      v-loading="listLoading"
      fit
      highlight-current-row
    >
      <el-table-column fixed prop="id" label="id" width="100"></el-table-column>
      <el-table-column prop="wx_avatar" label=" 头像" min-width="120">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.user.wx_avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="user.nickname" label=" 昵称" min-width="120"></el-table-column>
      <el-table-column prop="user.phone" label=" 手机号码" min-width="120"></el-table-column>
      <el-table-column prop="time" label=" 时间" min-width="120"></el-table-column>
      <el-table-column prop="status" label=" 状态" min-width="120">
        <template slot-scope="scope">{{ statusFormat(scope.row.status)}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="destroy(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page="page"
      :limit="listQuery.limit"
      :pageSizes="pageSizes"
      @pagination="pageChange"
    ></pagination>

    <el-dialog :title="dialogTitle" :visible.sync="formDialogIsVisible">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="头像">
          <el-image style="width: 100px; height: 100px" :src="formData.user.wx_avatar" />
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="formData.user.nickname" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="formData.user.phone" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="时间">
          <el-input v-model="formData.time" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="formData.status" placeholder="请选择状态">
            <el-option
              v-for="item in formSelections.statusList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input
            type="textarea"
            v-model="formData.content"
            autocomplete="off"
            :disabled="true"
            rows="10"
            placeholder="请输入描述内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formDialogIsVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, update, destroy, getStatusList } from "@/api/userComplaint";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "user_complaint",
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      page: 1,
      pageSizes: [10, 20, 30],
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 10,
        filter: {
          "user.nickname": null,
          "user.phone": null
        },
        options: {
          "user.nickname": "like",
          "user.phone": "like"
        }
      },
      formDialogIsVisible: false,
      formMode: "edit",
      formSelections: {
        statusList: []
      },
      formData: {
        id: undefined,
        phone: undefined,
        nickname: undefined,
        status: undefined,
        content: undefined,
        user: {}
      }
    };
  },
  computed: {
    dialogTitle() {
      return this.formMode === "add" ? "新增" : "编辑";
    }
  },
  created() {
    this.getList();
    this.init();
  },
  methods: {
    statusFormat(type) {
      let text = "未知";
      this.formSelections.statusList.forEach(item => {
        if (parseInt(item.id) === type) text = item.title;
      });
      return text;
    },
    async init() {
      let statusList = await getStatusList();
      this.formSelections.statusList = statusList.data;
    },
    pageChange(data) {
      this.page = data.page;
      this.listQuery.limit = data.limit;
      this.listQuery.offset = (this.page - 1) * this.listQuery.limit;
      this.refresh(false);
    },
    openDialog(row) {
      this.formMode = "edit";
      this.formData.id = row.id;
      this.formData.time = row.time;
      this.formData.user_id = row.user_id;
      this.formData.content = row.content;
      this.formData.status = row.status;
      this.formData.user = row.user;
      this.formDialogIsVisible = true;
    },
    save() {
      let promise;
      this.listLoading = true;
      promise = update(this.formData);
      promise
        .then(() => {
          this.refresh();
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    destroy(id) {
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.listLoading = true;
          await destroy({ id });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        })
        .finally(() => {
          this.refresh();
        });
    },
    searchData() {
      this.refresh(true);
    },
    refresh(isAll = false) {
      this.formDialogIsVisible = false;
      this.listLoading = false;
      if (isAll) {
        this.page = 1;
      }
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          let { data } = response;
          this.list = data.list;
          this.total = response.data.count;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    }
  },
  watch: {
    page: function(newVluae, oldVluae) {
      this.listQuery.offset = (newVluae - 1) * this.listQuery.limit;
    }
  }
};
</script>
